<template>
	<view class="uni-share">
		<text class="uni-share-title">分享到</text>
		<view class="flow uni-share-content">
			<button open-type="share" class="column uni-share-content-box" @click="shareClick">
				<view class="uni-share-content-image">
					<image src="/static/images/icon/weixin.png" class="content-image" mode="widthFix" />
				</view>
				<text class="uni-share-content-text">微信</text>
			</button>
			<button class="column uni-share-content-box" @click="pyqClick">
				<view class="flow uni-share-content-image">
					<image src="/static/images/icon/pyq.png" class="content-image" mode="widthFix" />
				</view>
				<text class="uni-share-content-text">朋友圈</text>
			</button>
		</view>
		<text class="uni-share-btn" @click="cancel('share')">取消分享</text>
		<uni-popup ref="showtip" :mask-click="false" :type="popType" @change="loginChange">
			<loginPop class="pop" @cancel="loginCancel"></loginPop>
		</uni-popup>
	</view>
</template>

<script>
	import util from '@/common/util.js'
	import {mapState} from 'vuex'
	import loginPop from '@/components/loginPop.vue'
	export default {
		components:{loginPop},
		data() {
			return {
				popType: ''
			};
		},
		computed:{
			...mapState(['hasLogin','userInfo']),
		},
		methods:{
			toggleLoginPopup(type,open) {
				this.popType = type
				this.$nextTick(() => {
					this.$refs['show' + open].open()
				})
			},
			loginCancel(type){
				this.$refs['show' + type].close()
			},
			loginChange(e) {
				console.log('是否打开:' + e.show)
			},
			shareClick(){
				this.$emit('wxClick')
			},
			pyqClick(){
				if(this.hasLogin && this.userInfo){
					this.$emit('pyqClick')
				}else{
					this.toggleLoginPopup('center','tip')
				}
			},
			cancel(){
				this.$emit('shareCancel')
			}
		},
		
	}
</script>

<style lang="scss">
	/* 底部分享 */
	.uni-share {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		@include backG;
		@include borderR(20rpx 20rpx 0 0);
		.uni-share-title {
			line-height: 60rpx;
			@include font($fontSize - 4rpx);
			@include padding(15rpx 0);
			@include text-align;
		}
		.uni-share-content {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			@include justify-content;
			@include padding(30rpx);
			.uni-share-content-box {
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				align-items: center;
				@include width(200rpx);
				@include borderR(0);
				border: 0;
				.uni-share-content-image {
					/* #ifndef APP-NVUE */
					display: flex;
					/* #endif */
					@include flex-align-justify;
					@include widthHeight(60rpx);
					overflow: hidden;
					@include borderR(10rpx);
					.content-image {
						@include widthHeight(60rpx);
					}
				}
				.uni-share-content-text {
					@include font($fontSize - 2rpx,$blackColor);
					@include padding(10rpx 0 20rpx);
				}
			}
		}
		.uni-share-btn {
			@include height(90rpx);
			@include font($fontSize,$greyColor);
			@include border(2rpx,$borderBg,'top');
			@include text-align;
		}
	}
	
	
	
	
	
	
	
	
	
	
</style>
